<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="/css/kube.css">
    <link href="http://source.luckyjing.com/toastr.css" rel="stylesheet">
    <style>
        body {
            margin-top: 50px;
        }

        colunm {
            position: relative;
        }

        #changePage {
            position: absolute;
            right:50px;
            top:50px;
        }
        a samp{
            padding:10px 15px;
        }
        input {
            transition: all .5s ease-in;
        }
    </style>

</head>
<body>
<row centered>
    <column cols="6">
        <h1 class="text-centered">登录</h1>
        <a href="/signup" id="changePage">
            <samp>注册</samp>
        </a>
    </column>
</row>
<row centered>
    <column cols="6">
        <form class="forms" id="signinForm">
            <section>
                <label>用户名</label>
                <input type="text" name="username">

            </section>
            <section>
                <label>密码</label>
                <input type="password" name="password">
            </section>
            <section class="text-centered">
                <button type="primary" class="signin">登录</button>
            </section>
        </form>

    </column>
</row>

<script src="//cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/toastr.js/latest/js/toastr.min.js"></script>
<script>
    toastr.options = {
        "positionClass": "toast-top-center",
    };
    $(".signin").on('click', function (event) {
        event.preventDefault();
        $.post('/signin', $("#signinForm").serialize(), function (res) {
            if (res.status == 1000) {
                toastr.success("登录成功");
                setTimeout(function () {
                    window.location.href = '/';
                },1000);
            }else{
                toastr.error("用户名或密码错误");
            }
        })
    })
</script>
</body>
</html>